<template>
	<view :style="[pageStyle]" class="smallBox" :data-theme="theme">
		<!-- 分类导航 -->
		<cateNav v-if="showCateNav" :dataConfig="cateNavData" @changeTab="changeTab"></cateNav>
		<view v-if="navIndex === 0">
			<block v-for="(item, index) in styleConfig" :key="index">
				<!-- 新闻简报 -->
				<news v-if="item.name == 'news'" :dataConfig="item"></news>
				<!-- menu -->
				<menus v-if="item.name == 'menus'" :dataConfig="item"></menus>
				<!-- 文章列表 -->
				<articleList v-if="item.name == 'homeArticle'" :dataConfig="item"></articleList>
				<!-- 秒杀 -->
				<seckill-data v-if="item.name == 'homeSeckill'" :dataConfig="item"></seckill-data>
				<!-- 直播 -->
				<!-- #ifdef MP -->
				<liveBroadcast v-if="item.name == 'liveBroadcast'" :dataConfig="item"></liveBroadcast>
				<!-- #endif -->
				<!-- 优惠券 -->
				<coupon v-if="item.name == 'homeCoupon'" :dataConfig="item"></coupon>
				<!-- 图片魔方 -->
				<pictureCube v-if="item.name == 'pictureCube'" :dataConfig="item"></pictureCube>
				<!-- 轮播图 -->
				<swiperBg v-if="item.name == 'swiperBg'" :dataConfig="item"></swiperBg>
				<!-- 视频 -->
				<shortVideo v-if="item.name == 'homeVideo'" :dataConfig="item"></shortVideo>
				<!-- 商户 -->
				<merchant-list v-if="item.name == 'homeMerchant'" :dataConfig="item"></merchant-list>
				<!-- 辅助线 -->
				<guide v-if="item.name == 'guide'" :dataConfig="item"></guide>
				<!-- 富文本-->
				<rich-text-editor v-if="item.name == 'richTextEditor'" :dataConfig="item"></rich-text-editor>
				<!-- 辅助空白-->
				<blank-page v-if="item.name == 'blankPage'" :dataConfig="item"></blank-page>
				<!-- 标题 -->
				<home-title v-if="item.name == 'titles'" :dataConfig="item"></home-title>
				<!-- 逛逛 -->
				<discover v-if="item.name == 'homeDiscover'" :dataConfig="item"></discover>
				<!-- 商品列表 -->
				<goodList v-if="item.name == 'goodList'" :dataConfig="item" @detail="goDetail"></goodList>
				<!-- 选项卡商品列表-->
				<homeTab v-if="item.name == 'homeTab'" :dataConfig="item" @detail="goDetail"></homeTab>
				<!-- 底部导航-->
				<page-footer v-if="item.name == 'footer'" :dataConfig="item" :isSmallPage="isSmallPage"></page-footer>
			</block>
		</view>
		<!-- 分类页-->
		  <view class="productList" v-if="navIndex > 0 && sortList.length>0">
		    <view class="sort acea-row" :class="sortList.length ? '' : 'no_pad'"
		          :style="{ marginTop: sortMarTop + 'px' }">
		      <navigator hover-class="none"
		                 :url="'/pages/goods/goods_list/index?cid=' + item.id + '&title=' + item.name" class="item"
		                 v-for="(item, index) in sortList" :key="index">
		        <view class="pictrue">
		          <!-- <easy-loadimage :image-src="item.icon" class='slide-image skeleton-rect'>
		          </easy-loadimage> -->
		          <image :src="item.icon" class='slide-image tui-skeleton-rect'></image>
		        </view>
		        <view class="text">{{ item.name }}</view>
		      </navigator>
		      <view class="item" @click="bindMore()" v-if="sortList.length >= 9">
		        <view class="pictrues acea-row row-center-wrapper">
		          <text
		              class="iconfont icon-gengduo2"></text>
		        </view>
		        <view class="text">更多</view>
		      </view>
		    </view>
		  </view>
		  <!-- 推荐商品，分类商品列表-->
		  <recommend v-if="categoryId>0" ref="recommendIndex" :categoryId='categoryId' :isShowTitle="isShowTitle"
		  	@getRecommendLength="getRecommendLength"></recommend>
		  <view class='noCommodity' v-if="isNoCommodity&& navIndex > 0">
		  	<view class='pictrue'>
		  		<image :src="urlDomain+'crmebimage/presets/noShopper.png'"></image>
		  	</view>
		  	<text class="text-ccc">暂无商品</text>
		  </view>
		  <view v-if="bottomNavigationIsCustom" class="footerBottom"></view>
		</view>
	</view>
</template>
<script>
	import {
		getDiy,
		getCategoryThird
	} from '@/api/api.js';
	import { mapGetters} from "vuex";
	import tuiSkeleton from '@/components/base/tui-skeleton.vue';
	import liveBroadcast from '@/components/homeIndex/liveBroadcast';
	import merchantList from '@/components/homeIndex/merchant.vue'
	import homeComb from '@/components/homeIndex/homeComb';
	import seckillData from "@/components/homeIndex/seckill.vue";
	import couponDialog from "@/components/homeIndex/couponDialog.vue"
	import coupon from "@/components/homeIndex/coupon.vue";
	import menus from "@/components/homeIndex/menus.vue";
	import pictureCube from '@/components/homeIndex/pictureCube'
	import news from '@/components/homeIndex/news'
	import goodList from '@/components/homeIndex/goodList'
	import guide from '@/components/homeIndex/guide';
	import articleList from '@/components/homeIndex/articleList'
	import swiperBg from '@/components/homeIndex/swiperBg'
	import headerSearch from '@/components/homeIndex/headerSearch';
	import cateNav from '@/components/homeIndex/cateNav';
	import richTextEditor from '@/components/homeIndex/richTextEditor';
	import shortVideo from '@/components/homeIndex/video';
	import homeTab from '@/components/homeIndex/homeTab';
	import discover from '@/components/homeIndex/discover';
	import blankPage from '@/components/homeIndex/blankPage';
	import homeTitle from '@/components/homeIndex/title';
	import pageFooter from '@/components/pageFooter/index.vue';
	import recommend from "@/components/base/recommend.vue";
	let app = getApp();
	export default {
		data() {
			return {
				theme: app.globalData.theme,
				isSmallPage: true, //是否是微页面，true是，false不是
				styleConfig: [],
				bgColor: '',
				bgPic: '',
				bgTabVal: '',
				isFixed: true,
				storeHeight: 0,
				smallPage: false,
				homeCombData: {},
				sortList: [],
				sortMarTop: 0,
				showCateNav:false, //是否显示分类导航组件
				cateNavData:{}, //分类导航组件数据
				navIndex: 0,
				pageStyle:null,
				cateNavActive: 0,
				categoryId: 0, //分类id
				diyId: 0 ,//diyid
				isNoCommodity: false,
			}
		},
		components: {
			merchantList,
			homeComb,
			tuiSkeleton,
			seckillData,
			liveBroadcast,
			couponDialog,
			coupon,
			menus,
			pictureCube,
			news,
			goodList,
			articleList,
			swiperBg,
			headerSearch,
			cateNav,
			guide,
			richTextEditor,
			shortVideo,
			homeTab,
			discover,
			blankPage,
			homeTitle,
			pageFooter,
			recommend
		},
		computed: mapGetters(['bottomNavigationIsCustom']),
		onLoad(options) {
			if (options.scene) {
				let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
				if (value.id) this.diyId = Number(value.id);
			}
			if (options.id){
				this.diyId = Number(options.id);
			} 
			this.diyData(this.diyId)
		},
		methods: {
			diyData(id) {
				let that = this;
				that.styleConfig = [];
				uni.showLoading({
					title: '加载中...'
				});
				getDiy(id).then(res => {
					uni.setNavigationBarTitle({
						title: res.data.title
					});
					uni.setNavigationBarColor({
						//必须要16进制小写
					    frontColor: res.data.titleColor,
					    backgroundColor: res.data.titleBgColor.toString().toLowerCase(),
					})
					let data = res.data;
					that.styleConfig = that.objToArr(res.data.value);
					uni.hideLoading();
					that.styleConfig.forEach((item) => {
						if (item.name == 'tabNav'){
							this.showCateNav = true;
							this.cateNavData = item;
						}
					});
					this.pageStyle = {
						'background-color': data.isBgColor ===1 ? res.data.colorPicker : '',
						'background-image': data.isBgPic ===1 ? `url(${res.data.bgPic})` : '',
						'background-repeat': res.data.bgTabVal === 1 ? 'repeat-y' : 'no-repeat',
						'background-size': res.data.bgTabVal === 2 ? 'cover' : 'contain'
					};
					setTimeout(() => {
						this.isNodes++;
					}, 100);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
					uni.hideLoading();
				})
			},
			getRecommendLength(e) {
				this.isNoCommodity = e == 0 ? true : false;
			},
			// 分类切换点击
			changeTab(index,item) {
				//type=0微页面，1分类，2首页
				this.cateNavActive = index;
				if (item.type == 1) {
					this.navIndex = 1;
					if (!item.val) {
						this.sortList = [];
						this.categoryId = 0;
						this.$util.Tips({
							title: "请在平台端选择商品分类！确保加载商品分类数据。"
						});
						return;
					} else {
						getCategoryThird(item.val).then(res => {
							this.sortList = res.data;
							// #ifdef H5
							self.sortMarTop = 10;
							// #endif
						});
						this.categoryId = item.val;
						this.isShowTitle = false;
					}
				} else if (item.type == 0) {
					this.navIndex = 0;
					this.isShowTitle = true;
					this.categoryId = 0;
					if (!item.val) {
						return this.$util.Tips({
							title: "请在平台端选择微页面链接！确保加载微页面数据。"
						});
					} else {
						this.styleConfig = [];
						this.diyData(item.val, true);
					}
				} else {
					this.categoryId = 0;
					this.navIndex = 0;
					this.styleConfig = [];
					this.diyData(this.diyId, false);
				}
			},
			// 对象转数组
			objToArr(data) {
				let obj = Object.keys(data).sort();
				let m = obj.map(key => data[key]);
				return m;
			},
			// 去商品详情页
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/goods_details/index?id=${item.id}`
				});
			},
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		onReachBottom() {
			
		},
	}
</script>

<style lang="scss" scoped>
	.smallBox{
		padding-bottom: calc(130rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}
	.productList {
	  background-color: #F5F5F5;
	  margin-top:20rpx;
	  .sort {
	    width: 710rpx;
	    max-height: 380rpx;
	    background: rgba(255, 255, 255, 1);
	    border-radius: 16rpx;
	    padding: 0rpx 0rpx 20rpx 0rpx !important;
	    flex-wrap: wrap;
	    margin: 25rpx auto 0 auto;
	
	    &.no_pad {
	      padding: 0;
	    }
	
	    .item {
	      width: 20%;
	      margin-top: 20rpx;
	      text-align: center;
	
	      .pictrues {
	        width: 90rpx;
	        height: 90rpx;
	        background: #F5F5F5;
	        border-radius: 50%;
	        margin: 0 auto;
	      }
	
	      .pictrue {
	        width: 90rpx;
	        height: 90rpx;
	        background: #F5F5F5;
	        border-radius: 50%;
	        margin: 0 auto;
	      }
	
	      .slide-image {
	        width: 90rpx;
	        height: 90rpx;
	        border-radius: 50%;
	        overflow: hidden;
	      }
	
	      /deep/ .easy-loadimage,
	      uni-image,
	      .easy-loadimage {
	        width: 90rpx;
	        height: 90rpx;
	        display: inline-block;
	      }
	
	      .text {
	        color: #272727;
	        font-size: 24rpx;
	        margin-top: 10rpx;
	        // overflow: hidden;
	        white-space: nowrap;
	        text-overflow: ellipsis;
	      }
	    }
	  }
	}
.productList .list.on {
  background-color: #fff;
  border-top: 1px solid #f6f6f6;
}

.productList .list .item {
  width: 345rpx;
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;

  .name {
    display: flex;
    align-items: center;

    .name_text {
      display: inline-block;
      max-width: 200rpx;
    }
  }
}
</style>
